<template>
    <el-row >
      <div class="lineBar">
        <div class="bar" ref="bar"></div>
      </div>
    </el-row>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "bar",
    data() {
      return {
        total: 0
      }
    },
    props: {
      barParams: {type: [Object, Array], default: () => {}}
    },
    watch: {
      barParams() {
        let total = 0
        this.barParams.map(item => {
          total += item.value
        })
        this.total = total
        this.draw()
      }
    },
    mounted() {
      let myChart = echarts.init(this.$refs.bar)
      window.onresize = myChart.resize()
      myChart.setOption(this.initBar())
    },
    methods: {
      draw() {
        let myChart = echarts.init(this.$refs.bar)
        window.onresize = myChart.resize()
        myChart.setOption(this.initBar())
      },
      initBar() {
        let option = {
          title: {
            text: "总数\n" + (this.total || 0) + "个",
            subtext: "",
            textStyle: {
              color: "#0487ED",
              fontSize: "12"
            },
            x: "center",
            y: "34%"
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          // tooltip: {
          //   trigger: 'item',
          //   backgroundColor: "#E4EFFF",
          //   textStyle: {
          //     color: "#808080"
          //   },
          //   formatter: '{b} : {c} ({d}%)'
          // },
          legend: {
            left: 'left',
            bottom: 'bottom',
            textStyle: {
              color: "#808080",
              fontSize: "10"
            },
            // data: this.barParams.length > 0 ? this.barParams : ['热斑', '光伏板脱落', '光伏板踩踏', '围栏倾倒']
            data: this.barParams
          },
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#0FD5F9'}, {offset: 1, color: '#0487ED'}]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#FFFE95'}, {offset: 1, color: '#C1C049'}]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#FF9000'}, {offset: 1, color: '#FFCD5E'}]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#A2FFD0'}, {offset: 1, color: '#3EB076'}])
          ],
          series: [
            {
              name: '访问来源',
              type: 'pie',
              // label: "",
              radius: ['20%', '60%'],
              roseType: 'radius',
              center: ["center", "40%"],
              // data: this.barParams.length > 0 ? this.barParams : [
              //     {value: 335, name: '围栏倾倒'},
              //     {value: 310, name: '光伏板踩踏'},
              //     {value: 234, name: '光伏板脱落'},
              //     {value: 135, name: '热斑'}
              //   ],
              data: this.barParams,
              // data: [
              //   {value: 335, name: '围栏倾倒'},
              //   {value: 310, name: '光伏板踩踏'},
              //   {value: 234, name: '光伏板脱落'},
              //   {value: 135, name: '热斑'}
              // ],
              emphasis: {
                show: false,
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        return option
      }
    }
  }
</script>

<style lang="scss">
  .lineBar{
    width: 100%;
    display:flex;
    flex-wrap: nowrap;
    .line {
      flex: 4.8;
      height: 250px;
      margin-right: 4%;
    }
    .bar {
      flex:4.8;
      height: calc((100vh - 262px) / 2)!important;
    }
  }
</style>
